Animation Design
Start
Two panes - Left for text, right for plots.
Text : “How are QQ plots constructed?” Right pane - scatterplot of y vs x of some dataset.
Animation 1
Projecting of the dataset onto Y axis (We want to check if y is normally dist)
X axis Fades away
Y axis is black, points are red.
Animation notes:
- Setting Y = Y, X = 0 for all points and just doing a smooth transition. Then at the end fading the X axis.
Text : “We will begin by checking whether our variable Y - , is normally distributed”
Animation 2
Flipping of the axis (Y should now be our horizontal axis)
Animation notes:
Setting Y = X, X = Y, and doing a transition between them.
Need to figure out how to transition the axis itself
Text : “That means our goal is to compare the distribution of Y - , to that of a standard normal distribution.”
Animation 2.5
Standardizing Y.
Text “We standardize our data to make it more interpretable throughout calculations. It does not influence the distribution.”
Animation 3
Rise of the histogram for Y. Keeping the datapoints on the Axis still.
Animation notes:
Text : “This is what the distribution of Y looks like.”
Animation 4
Splitting the plot into 2 parts - Adding the Normal Density Plot / Histogram above.
Animation notes:
Keep the same plot, just subplot normal density above.
Make sure the Normal plot has the same exact binwidth and placement as the one for data. Make it blue vs black for our data.
Text : “And this is what we would see in the ideal scenario”
Animation 5
Adding the third and fourth panel to the right of both. Have empty axis and a straight line ready in bottom one (QQ plot).
Animation notes:
Use recursive subplots from plotly
Possibly blow up not one but two panels - one for calculations, and one for QQ-plot
Text : “First we need to see what numbers we would expect from our data if it was actually normally distributed”
Animation 7
Flash the datapoints on scatterplot blue and large, then start adding labels. First one from the left gets a 1, second a 2, and so on.
Text : “We begin by assigning ranks to our datapoints to determine quantiles”
Animation 8
Move the points on the scatter plot to the middle of the plot, color them blue then flash “n = #points” in the top right corner and make it appear as that text on the calculations tab as well. Move the points back down to the axis.
Text: “We calculate the number of points we have - n = #points”
Animation 9
Blow up the Calculations pane to be large. Have one single large point on there and space enough for labels. Move the first point there. Show r = rank, and n = #points in top right.
Animation notes:
Color the corresponding datapoint on the data graph in red, put a vertical line through the historgram as well maybe? Maybe make it an arrow?
Start by flashing the point bigger a few times, moving it to top right corner of the histogram plot. Then have it fade in at the bottom left of the calculation pane, and move to the top left of it.
There should be a n = #points already in top right, and when the point arrives have r = 1 pop up.
Text: " We will be using the same function to estimate quantiles as R does in the standard version. There are multiple options here"
Animation 10
Put the formulas for our probability points on the calculations pane:
If \(n \leq 10\) : \[
p_r = \frac{(r-\frac{3}{8})}{n-\frac{1}{4}}
\]
If \(n > 10\) :
\[
p_r = \frac{(r-\frac{1}{2})}{n}
\]
Plug r = 1 and n = #points into it and show the number.
Text: " We estimate the quantile of our data. This is equivallent to calling the ppoints(x) function on it. This means that we expect $p_1 = $ of data to fall below this point."
Animation 11
Blow up the normal density plot and put a big blue line at the quantile of the distribution. Flash the actual value for that quantile and then make it appear on the right side as $q_1 = $ . Show the calculation of \(p_1 - q_1 = d_1\) (TODO: double check this is the correct sign and direction)
Text: “We obtain a corresponding quantile of the normal distribution. Note that this value is higher / lower than expected.”
Animation 12
Move the datapoint down and fade away, then show up at the QQ plot and move it to it’s position. Label the point on the axes with the same colors as \(p_1\) and \(q_1\) for the axis respectively. Add a short line from it to the QQ-line, and flash it red with the number on the calculations plot also flashing the same color.
Text: “Now we plot the point at it’s position x = \(p_1\), y = \(q_1\)”.
Animation 13
Flash to about the middle of the pack and repeat Animations 10-12 for it.
Text: “We repeat the procedure for the rest of the datapoints”.
Animation 14
Flash to the last point and repear Animations 10-12 for it.
Text: “We repeat the procedure for the rest of the datapoints”.
Animation 15
The QQplot takes over the entire plotting area.
Text: “And we have made a QQplot”
LS0tCnRpdGxlOiAiUVEgcGxvdCBhbmltYXRpb24gZGVzaWduIGRvY3VtZW50IgpvdXRwdXQ6IGh0bWxfbm90ZWJvb2sKLS0tCgojIEFuaW1hdGlvbiBEZXNpZ24KCiMjIFN0YXJ0CgpUd28gcGFuZXMgLSBMZWZ0IGZvciB0ZXh0LCByaWdodCBmb3IgcGxvdHMuCgpUZXh0IDogIkhvdyBhcmUgUVEgcGxvdHMgY29uc3RydWN0ZWQ/IiAKUmlnaHQgcGFuZSAtIHNjYXR0ZXJwbG90IG9mIHkgdnMgeCBvZiBzb21lIGRhdGFzZXQuCgojIyBBbmltYXRpb24gMQoqIFByb2plY3Rpbmcgb2YgdGhlIGRhdGFzZXQgb250byBZIGF4aXMgKFdlIHdhbnQgdG8gY2hlY2sgaWYgeSBpcyBub3JtYWxseSBkaXN0KQoKKiBYIGF4aXMgRmFkZXMgYXdheQoKKiBZIGF4aXMgaXMgYmxhY2ssIHBvaW50cyBhcmUgcmVkLgoKQW5pbWF0aW9uIG5vdGVzOgoKKiBTZXR0aW5nIFkgPSBZLCBYID0gMCBmb3IgYWxsIHBvaW50cyBhbmQganVzdCBkb2luZyBhIHNtb290aCAKdHJhbnNpdGlvbi4gVGhlbiBhdCB0aGUgZW5kIGZhZGluZyB0aGUgWCBheGlzLgoKVGV4dCA6ICJXZSB3aWxsIGJlZ2luIGJ5IGNoZWNraW5nIHdoZXRoZXIgb3VyIHZhcmlhYmxlIFkgLSA8dmFyaWFibGUgbmFtZT4sCmlzIG5vcm1hbGx5IGRpc3RyaWJ1dGVkIgoKIyMgQW5pbWF0aW9uIDIKRmxpcHBpbmcgb2YgdGhlIGF4aXMgKFkgc2hvdWxkIG5vdyBiZSBvdXIgaG9yaXpvbnRhbCBheGlzKQoKQW5pbWF0aW9uIG5vdGVzOgoKKiBTZXR0aW5nIFkgPSBYLCBYID0gWSwgYW5kIGRvaW5nIGEgdHJhbnNpdGlvbiBiZXR3ZWVuIHRoZW0uIAoKKiBOZWVkIHRvIGZpZ3VyZSBvdXQgaG93IHRvIHRyYW5zaXRpb24gdGhlIGF4aXMgaXRzZWxmCgpUZXh0IDogIlRoYXQgbWVhbnMgb3VyIGdvYWwgaXMgdG8gY29tcGFyZSB0aGUgZGlzdHJpYnV0aW9uIG9mIFkgLSA8dmFyaWFibGUgbmFtZT4sCiB0byB0aGF0IG9mIGEgc3RhbmRhcmQgbm9ybWFsIGRpc3RyaWJ1dGlvbi4iCgojIyBBbmltYXRpb24gMi41CgpTdGFuZGFyZGl6aW5nIFkuCgpUZXh0ICJXZSBzdGFuZGFyZGl6ZSBvdXIgZGF0YSB0byBtYWtlIGl0IG1vcmUgaW50ZXJwcmV0YWJsZSB0aHJvdWdob3V0IGNhbGN1bGF0aW9ucy4KSXQgZG9lcyBub3QgaW5mbHVlbmNlIHRoZSBkaXN0cmlidXRpb24uIgoKIyMgQW5pbWF0aW9uIDMKClJpc2Ugb2YgdGhlIGhpc3RvZ3JhbSBmb3IgWS4gS2VlcGluZyB0aGUgZGF0YXBvaW50cyBvbiB0aGUgQXhpcyBzdGlsbC4KCkFuaW1hdGlvbiBub3RlczoKCiogQWRkaW5nIGdlb21faGlzdAoKKiBLZWVwaW5nIGRhdGFwb2ludHMgb24gWCBheGlzCgoqIE1heWJlIGFkZCBhIGRlbnNpdHkgZXN0aW1hdGlvbiBhcyB3ZWxsPwoKVGV4dCA6ICJUaGlzIGlzIHdoYXQgdGhlIGRpc3RyaWJ1dGlvbiBvZiBZIGxvb2tzIGxpa2UuIgoKIyMgQW5pbWF0aW9uIDQKClNwbGl0dGluZyB0aGUgcGxvdCBpbnRvIDIgcGFydHMgLSBBZGRpbmcgdGhlIE5vcm1hbCBEZW5zaXR5IFBsb3QgLyBIaXN0b2dyYW0gCmFib3ZlLgoKQW5pbWF0aW9uIG5vdGVzOgoKKiBLZWVwIHRoZSBzYW1lIHBsb3QsIGp1c3Qgc3VicGxvdCBub3JtYWwgZGVuc2l0eSBhYm92ZS4KCiogTWFrZSBzdXJlIHRoZSBOb3JtYWwgcGxvdCBoYXMgdGhlIHNhbWUgZXhhY3QgYmlud2lkdGggYW5kIHBsYWNlbWVudCBhcyB0aGUKb25lIGZvciBkYXRhLiBNYWtlIGl0IGJsdWUgdnMgYmxhY2sgZm9yIG91ciBkYXRhLgoKVGV4dCA6ICJBbmQgdGhpcyBpcyB3aGF0IHdlIHdvdWxkIHNlZSBpbiB0aGUgaWRlYWwgc2NlbmFyaW8iCgojIyBBbmltYXRpb24gNQoKQWRkaW5nIHRoZSB0aGlyZCBhbmQgZm91cnRoIHBhbmVsIHRvIHRoZSByaWdodCBvZiBib3RoLgpIYXZlIGVtcHR5IGF4aXMgYW5kIGEgc3RyYWlnaHQgbGluZSByZWFkeSBpbiBib3R0b20gb25lIChRUSBwbG90KS4KCkFuaW1hdGlvbiBub3RlczoKCiogVXNlIHJlY3Vyc2l2ZSBzdWJwbG90cyBmcm9tIHBsb3RseQoKKiBQb3NzaWJseSBibG93IHVwIG5vdCBvbmUgYnV0IHR3byBwYW5lbHMgLSBvbmUgZm9yIGNhbGN1bGF0aW9ucywgYW5kIG9uZQpmb3IgUVEtcGxvdAoKVGV4dCA6ICJGaXJzdCB3ZSBuZWVkIHRvIHNlZSB3aGF0IG51bWJlcnMgd2Ugd291bGQgZXhwZWN0IGZyb20gb3VyIGRhdGEgaWYgCml0IHdhcyBhY3R1YWxseSBub3JtYWxseSBkaXN0cmlidXRlZCIKCiMjIEFuaW1hdGlvbiA3CgpGbGFzaCB0aGUgZGF0YXBvaW50cyBvbiBzY2F0dGVycGxvdCBibHVlIGFuZCBsYXJnZSwgdGhlbiBzdGFydCBhZGRpbmcgbGFiZWxzLgpGaXJzdCBvbmUgZnJvbSB0aGUgbGVmdCBnZXRzIGEgMSwgc2Vjb25kIGEgMiwgYW5kIHNvIG9uLiAKClRleHQgOiAiV2UgYmVnaW4gYnkgYXNzaWduaW5nIHJhbmtzIHRvIG91ciBkYXRhcG9pbnRzIHRvIGRldGVybWluZSBxdWFudGlsZXMiCgojIyBBbmltYXRpb24gOAoKTW92ZSB0aGUgcG9pbnRzIG9uIHRoZSBzY2F0dGVyIHBsb3QgdG8gdGhlIG1pZGRsZSBvZiB0aGUgcGxvdCwgY29sb3IgdGhlbSBibHVlCnRoZW4gZmxhc2ggIm4gPSAjcG9pbnRzIiBpbiB0aGUgdG9wIHJpZ2h0IGNvcm5lciBhbmQgbWFrZSBpdCBhcHBlYXIgYXMgdGhhdCB0ZXh0Cm9uIHRoZSBjYWxjdWxhdGlvbnMgdGFiIGFzIHdlbGwuIE1vdmUgdGhlIHBvaW50cyBiYWNrIGRvd24gdG8gdGhlIGF4aXMuCgpUZXh0OiAiV2UgY2FsY3VsYXRlIHRoZSBudW1iZXIgb2YgcG9pbnRzIHdlIGhhdmUgLSBuID0gI3BvaW50cyIKCiMjIEFuaW1hdGlvbiA5CgpCbG93IHVwIHRoZSBDYWxjdWxhdGlvbnMgcGFuZSB0byBiZSBsYXJnZS4gSGF2ZSBvbmUgc2luZ2xlIGxhcmdlIHBvaW50IG9uIHRoZXJlCmFuZCBzcGFjZSBlbm91Z2ggZm9yIGxhYmVscy4gTW92ZSB0aGUgZmlyc3QgcG9pbnQgdGhlcmUuIFNob3cgciA9IHJhbmssIGFuZApuID0gI3BvaW50cyBpbiB0b3AgcmlnaHQuCgpBbmltYXRpb24gbm90ZXM6CgoqIENvbG9yIHRoZSBjb3JyZXNwb25kaW5nIGRhdGFwb2ludCBvbiB0aGUgZGF0YSBncmFwaCBpbiByZWQsIHB1dCBhIHZlcnRpY2FsCmxpbmUgdGhyb3VnaCB0aGUgaGlzdG9yZ3JhbSBhcyB3ZWxsIG1heWJlPyBNYXliZSBtYWtlIGl0IGFuIGFycm93PwoKKiBTdGFydCBieSBmbGFzaGluZyB0aGUgcG9pbnQgYmlnZ2VyIGEgZmV3IHRpbWVzLCBtb3ZpbmcgaXQgdG8gdG9wIHJpZ2h0IGNvcm5lcgpvZiB0aGUgaGlzdG9ncmFtIHBsb3QuIFRoZW4gaGF2ZSBpdCBmYWRlIGluIGF0IHRoZSBib3R0b20gbGVmdCBvZiB0aGUgY2FsY3VsYXRpb24KcGFuZSwgYW5kIG1vdmUgdG8gdGhlIHRvcCBsZWZ0IG9mIGl0LgoKKiBUaGVyZSBzaG91bGQgYmUgYSBuID0gI3BvaW50cyBhbHJlYWR5IGluIHRvcCByaWdodCwgYW5kIHdoZW4gdGhlIHBvaW50IGFycml2ZXMKaGF2ZSByID0gMSBwb3AgdXAuCgpUZXh0OiAiIFdlIHdpbGwgYmUgdXNpbmcgdGhlIHNhbWUgZnVuY3Rpb24gdG8gZXN0aW1hdGUgcXVhbnRpbGVzIGFzIFIgZG9lcyBpbiAKdGhlIHN0YW5kYXJkIHZlcnNpb24uIFRoZXJlIGFyZSBtdWx0aXBsZSBvcHRpb25zIGhlcmUiCgojIyBBbmltYXRpb24gMTAKClB1dCB0aGUgZm9ybXVsYXMgZm9yIG91ciBwcm9iYWJpbGl0eSBwb2ludHMgb24gdGhlIGNhbGN1bGF0aW9ucyBwYW5lOgoKSWYgJG4gXGxlcSAxMCQgOgokJApwX3IgPSBcZnJhY3soci1cZnJhY3szfXs4fSl9e24tXGZyYWN7MX17NH19CiQkCgpJZiAkbiA+IDEwJCA6CgokJApwX3IgPSBcZnJhY3soci1cZnJhY3sxfXsyfSl9e259CiQkCgpQbHVnIHIgPSAxIGFuZCBuID0gI3BvaW50cyBpbnRvIGl0IGFuZCBzaG93IHRoZSBudW1iZXIuIAoKVGV4dDogIiBXZSBlc3RpbWF0ZSB0aGUgcXVhbnRpbGUgb2Ygb3VyIGRhdGEuIFRoaXMgaXMgZXF1aXZhbGxlbnQgdG8gY2FsbGluZwp0aGUgcHBvaW50cyh4KSBmdW5jdGlvbiBvbiBpdC4gVGhpcyBtZWFucyB0aGF0IHdlIGV4cGVjdCAkcF8xID0gJCA8cF8xIHZhbHVlPiBvZgpkYXRhIHRvIGZhbGwgYmVsb3cgdGhpcyBwb2ludC4iCgojIyBBbmltYXRpb24gMTEKCkJsb3cgdXAgdGhlIG5vcm1hbCBkZW5zaXR5IHBsb3QgYW5kIHB1dCBhIGJpZyBibHVlIGxpbmUgYXQgdGhlIDxwXzEgdmFsdWU+IHF1YW50aWxlCm9mIHRoZSBkaXN0cmlidXRpb24uIEZsYXNoIHRoZSBhY3R1YWwgdmFsdWUgZm9yIHRoYXQgcXVhbnRpbGUgYW5kIHRoZW4gbWFrZSBpdCAKYXBwZWFyIG9uIHRoZSByaWdodCBzaWRlIGFzICRxXzEgPSAkIDxxXzEgdmFsdWU+LiBTaG93IHRoZSBjYWxjdWxhdGlvbiBvZiAKJHBfMSAtIHFfMSA9IGRfMSQgKFRPRE86IGRvdWJsZSBjaGVjayB0aGlzIGlzIHRoZSBjb3JyZWN0IHNpZ24gYW5kIGRpcmVjdGlvbikKClRleHQ6ICJXZSBvYnRhaW4gYSBjb3JyZXNwb25kaW5nIHF1YW50aWxlIG9mIHRoZSBub3JtYWwgZGlzdHJpYnV0aW9uLiBOb3RlIHRoYXQKdGhpcyB2YWx1ZSBpcyBoaWdoZXIgLyBsb3dlciB0aGFuIGV4cGVjdGVkLiIKCiMjIEFuaW1hdGlvbiAxMgoKTW92ZSB0aGUgZGF0YXBvaW50IGRvd24gYW5kIGZhZGUgYXdheSwgdGhlbiBzaG93IHVwIGF0IHRoZSBRUSBwbG90IGFuZCBtb3ZlIGl0CnRvIGl0J3MgcG9zaXRpb24uIExhYmVsIHRoZSBwb2ludCBvbiB0aGUgYXhlcyB3aXRoIHRoZSBzYW1lIGNvbG9ycyBhcyAKJHBfMSQgYW5kICRxXzEkIGZvciB0aGUgYXhpcyByZXNwZWN0aXZlbHkuICBBZGQgYSBzaG9ydApsaW5lIGZyb20gaXQgdG8gdGhlIFFRLWxpbmUsIGFuZCBmbGFzaCBpdCByZWQgd2l0aCB0aGUgbnVtYmVyIG9uIHRoZSBjYWxjdWxhdGlvbnMKcGxvdCBhbHNvIGZsYXNoaW5nIHRoZSBzYW1lIGNvbG9yLgoKVGV4dDogIk5vdyB3ZSBwbG90IHRoZSBwb2ludCBhdCBpdCdzIHBvc2l0aW9uIHggPSAkcF8xJCwgeSA9ICRxXzEkIi4KCiMjIEFuaW1hdGlvbiAxMwoKRmxhc2ggdG8gYWJvdXQgdGhlIG1pZGRsZSBvZiB0aGUgcGFjayBhbmQgcmVwZWF0IEFuaW1hdGlvbnMgMTAtMTIgZm9yIGl0LgoKVGV4dDogIldlIHJlcGVhdCB0aGUgcHJvY2VkdXJlIGZvciB0aGUgcmVzdCBvZiB0aGUgZGF0YXBvaW50cyIuCgojIyBBbmltYXRpb24gMTQKCkZsYXNoIHRvIHRoZSBsYXN0IHBvaW50IGFuZCByZXBlYXIgQW5pbWF0aW9ucyAxMC0xMiBmb3IgaXQuCgpUZXh0OiAiV2UgcmVwZWF0IHRoZSBwcm9jZWR1cmUgZm9yIHRoZSByZXN0IG9mIHRoZSBkYXRhcG9pbnRzIi4KCiMjIEFuaW1hdGlvbiAxNQoKVGhlIFFRcGxvdCB0YWtlcyBvdmVyIHRoZSBlbnRpcmUgcGxvdHRpbmcgYXJlYS4gCgpUZXh0OiAiQW5kIHdlIGhhdmUgbWFkZSBhIFFRcGxvdCIK